<template>
    <el-row>

        <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <slot name="name2">
            <el-table-column prop="directoryName" label="目录名称">
             </el-table-column>
        </slot>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template #default="{ row }">
            {{ row.addDate | Day }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="totals" label="面试题数量"> </el-table-column> -->
        <slot name="name1"></slot>
        <el-table-column label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template #default="{ row }">
            <el-link @click="onEnable(row)" type="primary">{{
              row.state === 0 ? "启用" : "禁用"
            }}</el-link>
            <el-link
              @click="onModify(row.id)"
              :type="row.state === 0 ? 'primary' : 'info'"
              :disabled="row.state === 1"
              >修改</el-link
            >
            <el-link
            @click="onDelete(row.id)"
              :type="row.state === 0 ? 'primary' : 'info'"
              :disabled="row.state === 1"
              >删除</el-link
            >
          </template>
            </el-table-column>
        </el-table>
        <DirectorysAdd ref="from" :dialog-visible="dialogVisible" @handle-close="handleClose"/>
    </el-row>
</template>

<script>
import { changeState, remove } from '@/api/hmmm/directorys'
import { changeState as tagsState } from '@/api/hmmm/tags'
import DirectorysAdd from '../components/directorys-add'
export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  methods: {
    async onEnable (row) {
      let state = null
      if (row.state === 1) {
        state = 0
      } else {
        state = 1
      }
      if (this.tableData[0].tagName) {
        await tagsState({ id: row.id, state })
      } else {
        await changeState({ id: row.id, state })
      }
      this.$message.success(state === 1 ? '已启动' : '已禁用')
      this.$emit('h-getList')
    },
    onModify (id) {
      this.tableData.forEach(itm => {
        if (itm.id === id) {
          this.$refs.from.form = itm
        }
      })
      this.dialogVisible = true
    },
    handleClose () {
      this.$emit('h-getList')
      this.dialogVisible = false
    },
    onDelete (id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.handleClose()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-link {
    margin-left: 10px;
  }
</style>
